<template>
<div style="height:100%">
  <a-layout id="components-layout-demo-custom-trigger" style="height:100%">
    <a-layout-sider :trigger="null" collapsible v-model="collapsed" class="nav" width="260px">
      <div class="logo" />
      <!-- 侧边导航 -->
      <a-menu theme="dark" mode="inline" @select="select" :openKeys="openKeys" @openChange="onOpenChange">
        <a-menu-item style="height:60px;line-height:60px;margin-top: 0;position: relative">
          <router-link v-show="false" class="homePage" :to="homepage.link" style="width: 100%;height: 100%;display: inline-block">{{homepage.title}}</router-link>
          <a-icon type="home" />
          <span class="list_data">
            <router-link class="homePage" :to="homepage.link" style="width: 100%;height: 100%;display: inline-block">{{homepage.title}}</router-link>
          </span>
        </a-menu-item>
        <a-sub-menu v-for="(title,index) of navList" :key="index" style="padding-top:6px;padding-bottom:6px">
          <span slot="title">
            <a-icon :type="icon[index]" /><span>{{title.name}}</span></span>
          <a-menu-item v-for="(item,i) of title.permissionList" :key="index+'-'+i" style="margin:0">
            <router-link :to="item.url">{{item.name}}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout :class="[{right:true},{fold:collapsed}]" style="height:100%">
      <!-- <a-spin :spinning="spinning" size="large" tip="加载中..."> -->
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="()=> collapsed = !collapsed" />
        <div class="ico-rig">
          <a-icon type="search" />
          <a-icon type="bell" />
          <div class="ico-portrait">
            <a-dropdown style="margin-top:-20px">
              <span class="ant-dropdown-link">
                <img src="../img/u218.jpg" alt="">
                <span>{{name}}</span>
              </span>
              <a-menu slot="overlay">
                <a-menu-item key="1">用户 : {{name}}</a-menu-item>
                <a-menu-item key="2">
                  <span @click="outLogin" style="lineHeight:24px;display:inline-block;">退出登录</span>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>
      <div class="crumbs">
        <a-breadcrumb>
          <a-breadcrumb-item>康姆矿</a-breadcrumb-item>
          <a-breadcrumb-item v-if="crumbs.stairH2">{{crumbs.stairH2}}</a-breadcrumb-item>
          <a-breadcrumb-item v-if="crumbs.stairH1">
            <router-link :to=crumbs.stairH3 v-if="crumbs.stairH3">{{crumbs.stairH1}}</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item v-if="'userLook'===$route.name">用户详情</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
      <!-- </a-spin> -->
    </a-layout>
  </a-layout>
</div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      spinning: false,
      collapsed: false,
      homepage: {
        title: "主页",
        link: "/"
      },
      navList: [],
      icon: [
        "user",
        "picture",
        "table",
        "profile",
        "warning",
        "setting"
      ],
      crumbs: {
        stairH1: "首页",
        stairH2: "",
        stairH3: ""
      }, //面包屑导航数据
      name: "", //登陆姓名
      openKeys: [],
      rootSubmenuKeys: [1, 2, 3, 4, 5, 6]
    };
  },
  created() {
    this.name = sessionStorage.getItem("name");
    //添加请求拦截器
    axios.interceptors.request.use(
      config => {
        //在发送请求之前做某事，比如说 设置loading动画显示
        this.spinning = true;
        return config;
      },
      error => {
        //请求错误时做些事
        this.spinning = false;
        return Promise.reject(error);
      }
    );
    //添加响应拦截器
    axios.interceptors.response.use(
      response => {
        //对响应数据做些事，比如说把loading动画关掉
        this.spinning = false;
        return response;
      },
      error => {
        //请求错误时做些事
        this.spinning = false;
        return Promise.reject(error);
      }
    );
    this.crumbs.stairH1 = sessionStorage.getItem("stairH1");
    this.crumbs.stairH2 = sessionStorage.getItem("stairH2");
    this.crumbs.stairH3 = sessionStorage.getItem("stairH3");
    this.$ajax.get("/admin/querySide").then(res => {

      this.navList = res.data.data;
        console.log(this.navList);
    }) //权限导航请求
  },
  methods: {
    select({
      item
    }) {
      let a = item.$el.parentNode.parentNode.firstChild.innerText;
      let b = item.$el.innerText;
      let c = item.$el.children[0].hash.replace("#/", "");
      sessionStorage.setItem("stairH1", b);
      sessionStorage.setItem("stairH2", a);
      sessionStorage.setItem("stairH3", c);
      this.crumbs.stairH1 = sessionStorage.getItem("stairH1");
      this.crumbs.stairH2 = sessionStorage.getItem("stairH2");
      this.crumbs.stairH3 = sessionStorage.getItem("stairH3");
    }, //面包屑导航赋值
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    //退出登录
    outLogin() {
      this.$ajax.get("/kmd-field-web/admin/logout").then(res => {
        if (res.data.statusCode) {
          this.$message.success("退出登录成功!");
          sessionStorage.removeItem("name");
          sessionStorage.removeItem("stairH1");
          sessionStorage.removeItem("stairH2");
          sessionStorage.removeItem("stairH3");
          this.$router.push({
            path: "/loginPage",
            name: "loginPage"
          });
        } else {
          this.$message.error(this.data.message);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.ant-layout-content {
    padding: 24px;
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    //   height: 1000px;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 80px;
    background: url("../img/u25.png") no-repeat 20px 30px;
    background-color: #00284d;
}

.homePage {
    color: inherit;
    &:hover {
        color: inherit;
    }
}

.crumbs {
    height: 54px;
    width: 100%;
    padding-left: 35px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ffffff;
    border-top: 1px solid #e9e9e9;
}

.ico-rig {
    float: right;
    margin-right: 40px;
    font-size: 20px;
    i {
        margin-right: 24px;
    }
    .ico-portrait {
        position: relative;
        float: right;
        z-index: 3;
        padding-right: 20px;
        img {
            width: 20px;
            height: 20px;
        }
        span {
            display: inline-block;
            font-size: 14px;
        }
        .quitBox {
            position: absolute;
            left: 0;
            top: 30px;
            z-index: 0;
            .logOut {
                padding: 10px;
                margin-top: 20px;
                margin-right: 20px;
                background: #fff;
                font-size: 14px;
                line-height: 20px;
                width: 80px;
                box-shadow: 0 0 4px #ccc;
            }
        }
    }
}

.fade-enter-active {
    transition: all 0.5s ease;
    top: 0;
}
/* .fade-leave-active below version 2.1.8 */
.fade-enter
{
    top: 40px;
}

/*.list_data{*/
/*position: absolute;*/
/*;*/
/*}*/
</style>
